import * as THREE from "three";

const scene = new THREE.Scene();

// box
const geometry = new THREE.BoxGeometry(1, 1, 1);

// material
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// mesh
const mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 0.5;
// scene.add(mesh);

// Scale
// mesh.scale.x = 1.5;
// mesh.scale.y = 2;
// mesh.scale.z = 2.5;

// Rotation
mesh.rotation.y = Math.PI * 1;
// mesh.rotation.y = 0;

// ******************************************

const cube1 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
const cube2 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: "red" }));
cube2.position.x = -2;
const cube3 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: "blue" }));
cube3.position.x = 2;

// Group
const group = new THREE.Group();
group.add(cube1);
group.add(cube2);
group.add(cube3);

group.position.y = 1;

scene.add(group);

// Axes helper
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);

// Sizes
const sizes = {
  width: 800,
  height: 600,
  aspect() {
    return this.width / this.height;
  },
};

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.aspect(), 0.1, 1000);
camera.position.set(0, 0, 7);

scene.add(camera);

// Renderer

export function init(canvas) {
  const renderer = new THREE.WebGLRenderer({
    canvas,
  });

  renderer.setSize(sizes.width, sizes.height);

  renderer.render(scene, camera);
}
